<template>
	<view class="page">
		<block v-if="isInit">
			<fu-loading></fu-loading>
		</block>
		<block v-else>
			<view class="order-detail-page">
				<!-- 顶部导航栏-开始 -->
				<view class="cu-bar fixed" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }">
					<view class="action" @tap="back()"><text class="cuIcon-back"></text></view>
					<view class="content" :style="[{ top: StatusBar + 'px' }]">订单详情</view>
				</view>
				<!-- 顶部导航栏-结束 -->
				<!-- 订单状态-开始 -->
				<view class="status-box flex align-center justify-between">
					<view class="left text-white">
						<view class="status">{{info.status | afterStatus}}</view>
						<view class="text-sm" v-if="info.status == 1 && info.refund_type == 2">
							等待用户将商品寄回
						</view>
					</view>
					<image class="icon" :src="info.status | statusIconFil" mode="aspectFit"></image>
					<!-- <image class="icon" src="../../static/tk.png" mode="aspectFit"></image> -->
				</view>
				<!-- 订单状态-结束 -->
				<view class="order-wrap margin-bottom-sm order-radio" v-if="info.status==3">
					
					<view class="order-item text-df flex justify-start">
						<view class="order-item-title text-999">退款金额</view>
						<view class="order-item-info text-666">
							{{ info.refund_money }}
						</view>
					</view>
					
					<view class="order-item text-df flex justify-start">
						<view class="order-item-title text-999 flex justify-between">退款账户</view>
						<view class="order-item-info text-666">原路退回</view>
					</view>
					
					<view class="order-item text-df flex justify-start">
						<view class="order-item-title text-999 flex justify-between">退款时间</view>
						<view class="order-item-info text-666">{{ info.refund_time }}</view>
					</view>
				
				</view>
				
				<view class="order-wrap margin-bottom-sm order-radio" v-if="info.status==1">
					<view class="title text-lg text-blod margin-bottom-sm">退货信息</view>
					<view class="order-item text-df flex justify-start">
						<view class="order-item-title text-999">退货地址</view>
						<view class="order-item-info text-666">
							{{shopInfo.contacts_name}} {{shopInfo.contacts_phone}}
						</view>
					</view>
					<view class="order-item text-df flex justify-start">
						<view class="order-item-title text-999"></view>
						<view class="order-item-info text-666">
							{{shopInfo.store_province_name}}{{shopInfo.store_city_name}}{{shopInfo.store_district_name}}{{shopInfo.store_address}}
						</view>
					</view>
					
					<view class="order-item text-df flex justify-start">
						<view class="order-item-title text-999 flex justify-between">退款说明</view>
						<view class="order-item-info text-666">请保证货物完整没有问题，我们收到货后会立即给您退款</view>
					</view>
					
				
				
				</view>
				<!-- 退款信息 开始 -->
				<view class="order-wrap margin-bottom-sm order-radio">
					<view class="title text-lg text-blod margin-bottom-sm">退款信息</view>
					<view class="order-item text-df flex justify-start">
						<view class="order-item-title text-999">退款原因</view>
						<view class="order-item-info text-666">
							{{ info.refund_reason }}
						</view>
					</view>
					<view class="order-item text-df flex justify-start align-center" >
						<view class="order-item-title text-999 flex justify-between">货物状态</view>
						<view class="order-item-info text-666" v-if="info.refund_type == 2">已收货</view>
						<view class="order-item-info text-666" v-if="info.refund_type == 1">未收到货</view>
					</view>
					<view class="order-item text-df flex justify-start">
						<view class="order-item-title text-999 flex justify-between">退款说明</view>
						<view class="order-item-info text-666">{{ info.refund_content }}</view>
					</view>
					<view class="order-item text-df flex justify-start">
						<view class="order-item-title text-999">退款凭证</view>
						<view class="order-item-info text-666 goods-price" v-if="info.refund_picture.length>0">
							<block v-for="(img,index) in info.refund_picture" :key="index">
								<image :src="img" mode="" @click="showImg(img)"></image>
							</block>
						</view>
						<view class="order-item-info text-666"v-else>
							无
						</view>
					</view>
				</view>
				<!-- 退款信息 结束 -->
				<!-- 地址信息 start -->
				<view class="address-wrap margin-bottom-sm order-radio-top-half">
					<view class="address flex justify-start">
						<view class="address-img flex justify-center align-center">
							<image src="../../static/address.png" mode=""></image>
						</view>
						<view class="address-info">
							<view class="address-title flex justify-start align-center text-bold">
								<view class="tag" v-if="info.addressInfo.label_name">
									{{ info.addressInfo.label_name }}
								</view>
								<view class="address-name text-333 text-lg">{{ info.addressInfo.receiver_name }}</view>
								<text v-if="info.addressInfo.receiver_sex == 1">(先生)</text>
								<text v-if="info.addressInfo.receiver_sex == 2">(女士)</text>
								<view class="address-phone text-333 text-lg">{{ info.addressInfo.receiver_mobile }}
								</view>
							</view>
							<view class="address-pos text-333 text-df">
								{{ info.addressInfo.province }}{{ info.addressInfo.city }}{{ info.addressInfo.district }}{{ info.addressInfo.receiver_address }}
							</view>
						</view>
					</view>
					<image src="../../static/bottom_line.png" mode="" class="img"></image>
				</view>
				<!-- 地址信息 end -->
				<!-- 商品信息 start -->
				<view class="order-goods-wrap order-radio-top-half">
					<view class="padding-top">
						订单编号：{{info.order_sn}}
					</view>
					<view class="flex flex-direction">
						<view class="order-item-content flex justify-between ">
							<view class="order-item-img">
								<fu-image :src="info.goods.thumb" mode="aspectFill"></fu-image>
							</view>
							<view class="order-item-info flex flex-direction justify-between">
								<view class="order-item-name text-df text-333 text-cut-2">{{info.goods.name }}</view>
								<view class="order-item-sku text-df text-sm text-999" v-if="info.goods.sku">{{ info.goods.sku.key_name }}</view>
								<view class="order-price flex justify-between align-center">
									<text class="text-price text-lg"
										style="color: #333!important;">{{ info.goods.shop_price }}</text>
									<text class="text-999 text-sm">x{{info.goods.num }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 商品信息 end -->
				<block>
					<!-- 付款信息 start -->
				<!-- 	<view class="order-wrap order-radio-bottom-half" style="margin-top: 0;">
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-333">商品总价</view>
							<view class="order-item-info text-666 text-right ">
								￥{{ info.order.order_money }}
							</view>
						</view>
						<view class="item total-price flex align-center justify-between">
							<text class="item-label"></text>
							<view class="item-value text-sm text-gray">
								实付款：
								<text class="text-sm goods-price">
									¥
									<text class="text-lg text-bold">{{info.order.real_money }}</text>
								</text>
							</view>
						</view>
					</view> -->
					<!-- 付款信息 end -->
					<!-- 订单信息 start -->
					<view class=" order-wrap margin-bottom-sm order-radio">
						<view class="title text-lg text-blod margin-bottom-sm">订单信息</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-999">订单备注</view>
							<view class="order-item-info text-666">
								{{ info.orderInfo.remarks? info.orderInfo.remarks:'暂无备注' }}
							</view>
						</view>
						<view class="order-item text-df flex justify-start align-center">
							<view class="order-item-title text-999 flex justify-between">订单编号</view>
							<view class="order-item-info text-666">{{ info.order.order_sn }}
								<text class="text-blue text-sm padding-left-sm"
									@click="copyOrderSn(info.order.order_sn)">复制</text>
							</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-999 flex justify-between">下单时间</view>
							<view class="order-item-info text-666">{{ info.order.create_time }}</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-999">付款金额</view>
							<view class="order-item-info text-666 goods-price" style="color: #333!important;">
								￥{{ info.order.payable_money }}
							</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-999 flex justify-between">支付方式</view>
							<view class="order-item-info text-666">{{ info.orderInfo.pay_type }}</view>
						</view>
						<view class="order-item text-df flex justify-start">
							<view class="order-item-title text-999 flex justify-between">支付时间</view>
							<view class="order-item-info text-666">{{ info.order.pay_time }}</view>
						</view>
					</view>
					<!-- 订单信息 end -->
				</block>
				<!-- 底部按钮 start -->
				<!-- 商家端状态值 0:申请中;-2:用户取消;-1:驳回;1:同意;2:确认收回;3:确认打款 -->
				<block>
					<view class="footer">
						<view class="order-btn-wrap solid-top">
							<view class="order-btn flex justify-end align-center text-center" v-if="info.status == 0 && info.refund_type == 1">
								<view class="order-btn-item text-333 text-sm" @click.stop="showAfter('refuse')">
									拒绝退款</view>
								<view class="order-btn-item text-333 text-sm active" @click.stop="showAfter('agree')">
									同意退款</view>
							</view>
							<view class="order-btn flex justify-end align-center text-center" v-if="info.status == 0 && info.refund_type == 2">
								<view class="order-btn-item text-333 text-sm" @click.stop="showAfter('refuse')">
									拒绝退货</view>
								<view class="order-btn-item text-333 text-sm active" @click.stop="agreeRefundGoods()">
									同意退货</view>
							</view>
							<view class="order-btn flex justify-end align-center text-center" v-if="info.status == 1 && info.refund_type == 2 && info.express_no">
								<view class="order-btn-item text-333 text-sm active" @click.stop="receiveGoods()">
									确认收货</view>
							</view>
							<view class="order-btn flex justify-end align-center text-center" v-if="info.status == 2 && info.refund_type == 2 ">
								<view class="order-btn-item text-333 text-sm active" @click.stop="showAfter('agree')">
									同意退款</view>
							</view>
						</view>
					</view>
				</block>
				<!-- 底部按钮 end -->
			</view>
			<!-- 同意退款 start -->
			<fu-popup mode="center" :z-index="99" v-model="agreeShow">
				<view class="agree-box flex flex-direction">
					<view class="flex justify-center padding text-lg">请输入退款金额</view>
					<view class="agree-input">
						<input type="number" v-model="refundMoney" placeholder="请输入退款金额" />
					</view>
					<view class="agree-bt" @click="agreeRefund">
						确认
					</view>
				</view>
			</fu-popup>
			<!-- 同意退款 end -->
			<!-- 同意退款 start -->
			<fu-popup mode="center" :z-index="99" v-model="refuseShow">
				<view class="flex flex-direction justify-center align-center">
					<view class="refuse-box flex flex-direction align-center">
						<view class="flex justify-center padding text-lg">请填写拒绝原因</view>
						<view class="refuse-text">
							<textarea v-model="refuseReason" placeholder="请输入拒绝原因" />
						</view>
						<view class="refuse-bt" @click="refuseRefund">
							确认
						</view>
					</view>
					<view class="cuIcon-close text-xl text-white margin-top" @tap.stop="refuseShow = false"></view>
				</view>
			</fu-popup>
			<!-- 同意退款 end -->
			<!-- 断网检测 start -->
			<fu-notwork></fu-notwork>
			<!-- 断网检测 end -->
		</block>
	</view>
</template>

<script>
import { BASE_URL } from '../../../../common/config';

	export default {
		components: {},
		data() {
			return {
				info: {
					//地址信息
					addressInfo: {},
					//订单信息
					orderInfo: {},
					// 快递信息
					expressInfo: {},
					// 商品优惠信息
					goodsInfo: {},
					status: '', //订单状态
					// 商品信息
					goods: [{}],
				}, //详情数据
				order_sn: '', //订单编号
				isInit: false, //初始化数据
				agreeShow: false,
				afterOrder: '',
				refundMoney: 0,
				refuseShow: false,
				refuseReason: '',
				shopInfo:{}
			};
		},
		filters: {
				parseTime(val) {
					if (!val) return '';
					let date = new Date(val * 1000);
					let year = date.getFullYear();
					let month = date.getMonth() + 1 + '';
					let day = date.getDate() + '';
					let hour = date.getHours() + '';
					let minute = date.getMinutes() + '';
					let second = date.getSeconds() + '';
			
					if (month.length == 1) month = '0' + month;
					if (day.length == 1) day = '0' + day;
					if (hour.length == 1) hour = '0' + hour;
					if (minute.length == 1) minute = '0' + minute;
					if (second.length == 1) second = '0' + second;
					return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
				},
			

			/**
			 *@description 过滤状态值
			 * 售后申请状态0:申请中;-2:用户取消;-1:驳回;1:同意;2:确认收回;3:确认打款
			 */
			afterStatus(val) {
				switch (val) {
					case -2:
						return '用户取消';
						break;
					case -1:
						return '已拒绝售后申请';
						break;
					case 0:
						return '申请中';
						break;
					case 1:
						return '已同意售后申请';
						break;
					case 2:
						return '确认收回';
						break;
					case 3:
						return '订单已退款';
						break;
						break;
				}
			},
			
		},
		onBackPress(e) {
			uni.$emit('onPageUpdata', {})
		},
		onShow() {
			if (this.id) {
				this.getOrderDetail(this.id);
			}
		},
		onLoad(options) {
			console.log('options', options)
			let {
				id
			} = options;
			this.getOrderDetail(id);
		},

		methods: {
			/**
			 * @description 页面返回
			 * @param {delta} delta = 返回的页面数，如果 delta 大于现有页面数，则返回到首页
			 */
			back(delta) {
				console.log('页面返回');
				uni.navigateBack({
					delta: delta || 1
				});
			},
			/**
			 * @author 邓东方
			 * @date 2021-5-10
			 * @description 复制单号
			 * @param {Number,String} 订单号
			 */
			copyOrderSn(order_sn) {
				uni.setClipboardData({
					data: order_sn,
					success: function() {}
				});
			},
			/**
			 * @description 获取订单详情信息
			 */
			getOrderDetail(id) {
				this.isInit = true;
				this.$api
					.post(global.apiUrls.getGoodsAfterSaleDetaile, {
						refund_id: id
					})
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {
							let info = res.data.data[0];
							this.info = info
							this.info.addressInfo = info.order_info;
							this.info.goods = info.goods_info;
							
							this.shopInfo = info.shop_info
						} else {
							this.$message.info(res.data.msg);
						}
						this.isInit = false;
					})
					.catch(err => {
						this.isInit = false;
						console.log(err);
					});
			},
			showAfter(type, order) {
				this.afterOrder = order;
				if (type == 'agree') {
					this.refundMoney = this.info.refund_money
					this.agreeShow = true
				} else {
					this.refuseShow = true
				}

			},
			agreeRefund() {
				if (!this.refundMoney) {
					this.$message.info('请输入退款金额');
					return
				}
				let api = global.apiUrls.agreeRefundMoney;
				if (this.info.status == 2 && this.info.refund_type == 2) {
					api = global.apiUrls.receiveRefundGoodsRefundMoney;
				}
				this.$api
					.post(api, {
						rfid: this.info.id,
						refund_money: this.refundMoney
					})
					.then(res => {
						if (res.data.code == 1) {
							this.$message.info('操作成功');
							uni.navigateBack({
								
							})
							this.agreeShow = false;
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			refuseRefund() {
				if (!this.refuseReason) {
					this.$message.info('请输入拒绝原因');
					return
				}
				this.$api
					.post(global.apiUrls.refuseRefundMoney, {
						rfid: this.info.id,
						reject_reason: this.refuseReason
					})
					.then(res => {
						if (res.data.code == 1) {
							this.$message.info('操作成功');
							this.refuseShow = false;
							uni.navigateBack({
								
							})
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			showImg(img){
				uni.previewImage({
					urls:[img],
					
				})
			},
			agreeRefundGoods() {
				let that = this;
				this.$util.showModal({
					title: '提示',
					content: '确定同意退货？',
					success: function(res) {
						if (res.confirm) {
							that.$api
								.post(global.apiUrls.agreeRefundMoney, {
									rfid: that.info.id,
								})
								.then(res => {
									if (res.data.code == 1) {
										that.$message.info('操作成功');
										uni.navigateBack({
											
										})
									} else {
										that.$message.info(res.data.msg);
									}
								})
								.catch(err => {
									console.log(err);
								});
						} else if (res.cancel) {}
					}
				});
			},
			receiveGoods(order) {
				let that = this;
				this.$util.showModal({
					title: '提示',
					content: '确定确认收货？',
					success: function(res) {
						if (res.confirm) {
							that.$api
								.post(global.apiUrls.receiveRefundGoods, {
									rfid: that.info.id,
								})
								.then(res => {
									if (res.data.code == 1) {
										that.$message.info('操作成功');
										uni.navigateBack({
											
										})
									} else {
										that.$message.info(res.data.msg);
									}
								})
								.catch(err => {
									console.log(err);
								});
						} else if (res.cancel) {}
					}
				});
			}





		}
	};
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.order-detail-page {
		background-image: url(../../static/bg-1.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		min-height: calc(100vh - 88rpx);
		padding-top: calc(88rpx + var(--status-bar-height));
		font-family: PingFang SC;
	}

	// 订单状态提示信息 start
	.order-status-title {
		height: 120rpx;
		line-height: 120rpx;
		text-indent: 32rpx;
		background: linear-gradient();
	}

	// 订单状态提示信息 end

	// 顶部导航栏-开始
	.cu-bar {
		color: white;
		box-shadow: none;
		background-image: url(../../static/bg-1.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	// 顶部导航栏-结束


	// 订单状态-开始
	.status-box {
		margin: 20rpx 24rpx;

		.status {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 8rpx;
		}

		.icon {
			width: 140rpx;
			height: 140rpx;
			margin-right: 14rpx;
		}
	}

	.group-info {
		margin: 24rpx;
		background-color: #FFFFFF;

		.group-tip {
			width: 26rpx;
			height: 28rpx;
		}

		.header-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;

			text {
				font-size: 50rpx;
			}

			image {
				width: 100%;
				height: 100%;
				;
			}
		}
	}

	.border {
		border: 1rpx dashed #dedede;
	}

	// 订单统一样式 start
	.text-000 {
		color: #000000;
	}

	.order-radio-top-half {
		border-radius: 16rpx 16rpx 0 0;
	}

	.order-radio-bottom-half {
		border-radius: 0 0 16rpx 16rpx;
	}

	.order-radio {
		border-radius: 16rpx;
	}

	.order-wrap {
		padding: 24rpx 32rpx 16rpx;
		box-sizing: border-box;
		background: #ffffff;
		margin:  24rpx;

		.title {
			padding: 24rpx 0 24rpx 22rpx;
			border-bottom: 1px solid #eeeeee;
			position: relative;

			&:after {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 30rpx;
				border-radius: 8rpx;
				content: '';
				display: block;
				background: $theme;
			}
		}

		.order-item {
			padding: 16rpx 0;

			.order-item-title {
				margin-right: 60rpx;
				width: 112rpx;
			}

			.order-item-title-max {
				margin-right: 60rpx;
				width: 200rpx;
			}

			.order-item-info {
				width: calc(100% - 175rpx);
				word-break: break-all;

				.text-price {
					color: $theme;
				}
				
				image{
					width: 135rpx;
					height: 135rpx;
					border-radius: 16rpx;
					margin: 12rpx 12rpx 0 0;
				}
			}

			.order-item-image {
				width: calc(100% - 175rpx);

				.img-wrap {
					position: relative;
					margin-right: 1.3%;
					margin-bottom: 1.3%;
					width: 32%;
					padding-bottom: 32%;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	// 订单统一样式 end
	// 地址信息 start
	.address-wrap {
		padding: 26rpx 32rpx 34rpx;
		margin: 0 24rpx;
		box-sizing: border-box;
		background: #ffffff;
		position: relative;

		.img {
			width: 100%;
			height: 6rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}

		.address {
			.address-img {
				margin-right: 22rpx;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.address-info {
				.address-title {
					padding: 6rpx 0;

					.tag {
						min-width: 56rpx;
						height: 34rpx;
						line-height: 34rpx;
						text-align: center;
						margin-right: 16rpx;
						border-radius: 8rpx;
						padding: 0 15rpx;
						color: #6a8bff;
						background-color: rgba($color: #6a8bff, $alpha: 0.1);
						border: 1px solid #6a8bff;
					}

					.address-name {}

					.address-phone {
						margin-left: 24rpx;
					}
				}

				.address-pos {
					padding: 6rpx 0;
				}
			}
		}
	}

	// 地址信息 end
	// 商品信息 start
	.order-goods-wrap {
		padding: 0 32rpx;
		box-sizing: border-box;
		background: #ffffff;
		margin: 24rpx 24rpx 0 24rpx;

		.order-item-content {
			padding: 32rpx 0;

			.order-item-img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				background: #eeeeee;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.order-item-info {
				width: calc(100% - 204rpx);

				.order-item-sku {
					padding: 16rpx 0 40rpx;
					height: 96rpx;
				}

				.order-price {
					text {
						&:nth-child(1) {
							color: #FB2A25;
						}
					}
				}
			}
		}
	}

	// 商品信息 end

	// 预售商品 start
	.goods-price {
		color: #FB2A25;
	}

	.item {
		padding-bottom: 32rpx;

		&.total-price {
			padding-top: 32rpx;
			border-top: 1px solid #EEEEEE;
		}
	}

	// 预售商品 end



	// 底部按钮 start
	.footer {
		&:after {
			content: '';
			display: block;
			width: 100%;
			height: 100rpx;
		}
	}

	.order-btn-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ffffff;
		padding: 0 32rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.order-btn {
			height: 100rpx;

			.order-btn-item {
				width: 170rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #F6F6F6;
				border-radius: 30rpx;
				margin-left: 24rpx;
				color: #333333;

				&.active {
					background-color: $bgtheme;
					color: #FFFFFF;
				}
			}
		}
	}

	// 底部按钮 end
	// 修改金额 start
	.money-wrap {
		width: 600rpx;
		min-height: 100%;
		background: #ffffff;
		padding: 0 10rpx;
		padding-bottom: 140rpx;
		padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		position: relative;

		.money-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #ffffff;
			padding: 20rpx 32rpx 0;
			box-sizing: border-box;
			padding-bottom: 30rpx;
			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

			.btn {
				width: 100%;
				height: 90rpx;
				border-radius: 45rpx;
				line-height: 90rpx;
				color: #ffffff;
				background: linear-gradient();
			}
		}

		.order-item-content {
			.order-item-img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;
				background: #eeeeee;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.order-item-info {
				width: calc(100% - 204rpx);

				.order-item-sku {
					padding: 12rpx 0 0rpx;
					height: 44rpx;
				}

				.order-price {
					padding: 4rpx 0;

					text {
						&:nth-child(2) {
							color: $theme;
						}
					}

					.placeholder {
						font-size: 28rpx;
					}

					view {
						&:nth-child(1) {
							color: $theme;
							background: #f1f1f1;
							border-radius: 8rpx;

							.text-symbol {
								transform: scale(0.7);
								margin-bottom: -4rpx;
							}
						}
					}
				}
			}
		}
	}

	// 修改金额 end
	// 取消订单 start
	.text-ccc {
		color: #cccccc;
	}

	.cancel-order {
		padding: 0 32rpx;
		box-sizing: border-box;

		.cancel-order-title {
			padding: 32rpx 0;

			.circle {
				width: 8rpx;
				height: 8rpx;
				background: rgba(255, 80, 1, 0.5);
				margin: 0 6rpx;

				&.shallow {
					background: rgba(255, 80, 1, 1);
				}
			}
		}

		.cancel-order-reason {
			.reason-item {
				height: 104rpx;
			}
		}

		.cancel-order-btn {
			margin: 48rpx 0 37rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: linear-gradient();
			border-radius: 45rpx;
		}
	}

	// 取消订单 end
	.order-price .num {
		width: 120rpx;
	}

	.btns {
		width: 100%;
		background-color: white;

		.btn {
			min-width: 150rpx;
			height: 56rpx;
			line-height: 56rpx;
			font-size: 24rpx;
			border-radius: 8rpx;
			margin-left: 20rpx;
			background: $bgtheme;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.agree-box {
		background-color: #fff;
		border-radius: 16rpx;
		width: 550rpx;

		.agree-input {
			background-color: #f8f8f8;
			padding: 20rpx;
			margin: 0 32rpx;
		}

		.agree-bt {
			margin: 32rpx;
			height: 77rpx;
			background-color: $theme;
			text-align: center;
			line-height: 77rpx;
			color: #FFFFFF;
			border-radius: 40rpx;
		}
	}

	.refuse-box {
		background-color: #fff;
		border-radius: 16rpx;
		width: 550rpx;

		.refuse-text {
			background-color: #f8f8f8;
			padding: 20rpx;
			margin: 0 32rpx;
			border-radius: 16rpx;
			width: 80%;
			margin: 0 44rpx;

			textarea {
				width: 100%;
				height: 200rpx;
				font-size: 28rpx;
			}
		}

		.refuse-bt {
			margin: 32rpx;
			text-align: center;
			color: #fff;
			width: 170rpx;
			height: 48rpx;
			background-color:$theme;
			border-radius: 24rpx;
		}
	}
</style>
